<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="sug-title">选择分类，查看规格参数模板:</div>
            <el-row>
                <el-col :span="6">
                    <div>
                        <!--树形结构-->
                        <el-tree :data="tableData"
                                 :props="defaultProps"
                                 @node-click="handleNodeClick"
                                 :expand-on-click-node="false"
                                 default-expand-all
                                 :indent="indent"
                                 ref="myTree"
                                 highlight-current
                        >
                        </el-tree>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div >
                        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
                        </el-breadcrumb>

                        <LeadRecList @showParam="changeVisible"
                                      @getGroupList="getGroupList"
                                      :groupData="groupData"
                                      :cid="currentId"
                                      style="padding-left: 10px"/>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "LeadRec",
        components:{
            LeadRecList:() => import('./LeadRecList'),
        },
        data(){
            return{
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                tableData: [],//树结构数据
                groupData:[],//组数据
                currentId: '',//当前类目id
                indent: 50,//宽度
                currentNode: {}, // 当前被选中的商品分类节点
                groupId:'',//组id
            }
        },
        methods:{
            //获取类目列表
            async getCategoryList() {
                const res = await this.$http.get("/item/recommend/getCategories")
                if (res.data.code !== "200") {
                    return this.$message.error('获取商品类目列表失败！错误码:' + res.data.code)
                }
                this.tableData = res.data.data
            },

            handleNodeClick(node){
                this.currentId = node.id
                this.getGroupList()
            },
            changeVisible(data){
                this.groupId = data
            },
            async getGroupList(){
                const res = await this.$http.get("/item/recommend/hGetOneBigInfo/"+this.currentId)
                if (res.data.code !== "200") {
                    return this.$message.error('获取列表失败！错误码:' + res.data.code)
                }

                this.groupData = res.data.data
            },
        },
        created() {
            this.getCategoryList()
        }
    }
</script>

<style lang="less" scoped>
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    ::v-deep .el-tree-node__content {
        height: 50px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 80px;
    }
    .sug-title{
        padding-left: 20px;
        height: 18px;
        line-height: 18px;
        border-bottom:  1px dashed rgba(120,120,120,0.24);
        padding-bottom: 20px;
    }
    .breadcrumb{
        padding: 10px;
    }
</style>